<template>
  <div id="scategroy">
    <van-nav-bar title="商品详情页" left-text="返回" right-text left-arrow @click-left="onClickLeft" />
    <ul  v-if="GoodsList.length>0">
      <li v-for="(item,i) in GoodsList" :key="i">
        <img :src="item.icon" alt />
        <p v-html="item.name"></p>
      </li>
    </ul>
    <van-empty v-else image="search" description="还没有该商品" />
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      cId: 0,
      GoodsList: []
    };
  },
  computed: {},
  methods: {
    //返回上一级
    onClickLeft() {
      this.$router.go(-1);
    },
    // 商品详情获取
    getGoodsList() {
      this.$axios({
        url: "https://api.it120.cc/small4/shop/goods/category/all"
      }).then(res => {
        if (res.code == 0) {
          this.GoodsList = res.data.filter(item => {
            return item.pid == this.cId;
          });
        }
      });
    }
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    this.cId = this.$route.params.id;
    this.getGoodsList();
  }
};
</script>
<style scoped lang="scss">
/* @import url(); 引入css类 */
ul {
  display: flex;
  width: 100%;
  justify-content: space-around;
  flex-wrap: wrap;
  li {
    width: 33%;
    padding: 2%;
    box-sizing: border-box;
    p {
      text-align: center;
      height: 0.8rem;
      line-height: 0.6rem;
    }
    img {
      width: 100%;
    }
  }
}
</style>